跳到主要内容

栅格布局

用于布局和排列内容的容器。

何时使用​

  • 当需要将页面内容进行网格化排列时，例如图片、卡片或其他组件。
  • 在响应式设计中，需要根据屏幕大小调整布局时，使用网格可以提供灵活性。

一、属性​

1. 主要属性​

1）功能​

常用布局：栅格提供了四种常用的布局模式以便快速布局。

image-20250606085334680
image-20250606085347650

行数：默认是 2，生成行容器的数量。

列数：默认是 2，一个行容器内生成的列容器数量。

image-20240830132336807
image-20240904154625024

行间距：行容器之间的间距。

image-20250606090122572
image-20250606090141698

列间距：列容器之间的间距。

image-20250606090355601
image-20250606090407289

2. 行容器&列容器​

栅格布局下，行容器和列容器的配置方式详见文档 [Row And Col 行列](Row And Col 行列)。

二、样式​

无特殊样式配置，详见 通用样式。

三、常见使用场景​

  1. 图片库
    在相册或产品展示页面中，使用网格排列图片，提升视觉效果。
    以下是一个 3 行 3 列的网格布局，并在其中一一放置 120×120 的图片组件。

    image-20240822161007286

  2. 卡片布局
    在信息展示页面中，使用网格排列多个卡片，便于用户快速浏览。

    image-20240822161441036

  3. 表单布局
    在复杂表单中，使用网格将输入字段进行合理排列，提高用户体验。
    以下是 2 行 2 列的网格布局，分别放置表单项。

    image-20240822161848043

  4. 仪表盘
    在数据仪表盘中，使用网格展示多个统计图表，方便用户对比和分析。

    image-20240823091625979

  5. 响应式设计
    在不同设备上，使用网格布局自动调整内容布局，确保良好的用户体验。